<template>
	<view class="container">
		<view class="tabBox">
			<u-tabs :list="tabList" @click="tabClick"></u-tabs>
		</view>
		 <view class="content">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
		 	<view class="list" v-for="(item,i) in list" :key="i">
		 		<view class="mess flex">
		 			<view class="tit flex-1">{{item.subject}}</view>
		 			<view class="num" :class="item.direction==0?'yellow':''">
						<text v-if="item.direction==0">+</text>
						<text v-if="item.direction==1">-</text>
						{{item.amount}}
					</view>
		 		</view>
				<view class="date">{{$filters.formatDate(item.tradeTime)}}</view>
		 	</view>
			</mescroll-body>
		 </view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { financeAccountJournal } from '@/common/API/bills'
import { onLoad,onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
const custId = ref()  //账户id
const custType = ref() //账户类型INDIVIDUAL个人/COMPANY企业/ROOM房屋
onLoad((options)=> {
	custId.value = options.custId
	custType.value = options.custType
})

const curTab = ref()
const list = ref<any>([])
const tabList = ref([
	{ name: '全部', val: '' },
	{ name: '消费', val: 1 },
	{ name: '充值', val: 0 },
])
const tabClick = (e)=>{
	console.log(e)
	curTab.value = e.val
	resetScroll()
}

const upCallback = async (mescroll)=>{
	let data = {
		pageNo: mescroll.num,
		pageSize: mescroll.size,
		direction: curTab.value,
		custId: custId.value,
		custType: custType.value
	}
	let res = await financeAccountJournal(data)
	let curPageData = res.list;
	let curPageLen = curPageData.length;
	if(mescroll.num == 1) list.value = [];
	list.value = list.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}

const resetScroll = ()=>{
	list.value = [];
	downCallback()
}
</script>

<style lang="scss" scoped>
.container{
	height: 100vh;
	.tabBox{
		height: 98rpx;
		padding: 0 10rpx;
	}
	.content{
		background: #fff;
		padding: 0 32rpx 30rpx;
		.list{
			border-bottom: 2rpx solid #e1e1e1;
			padding: 16rpx 0;
			.tit{
				font-size: 30rpx;
			}
			.num{
				font-size: 30rpx;
			}
		}
	}
}
</style>
